<!-- component: cc-pannel -->
<style>
    .cc-virtual-pannel {
        position: relative;
        text-align: center;
        height: 50vh;
        width: 80vw;
        resize: both;
    }

    .cc-virtual-pannel .seq-num {
        color: #5dc8fe
    }

    .cc-virtual-pannel__block {
        border: 1px solid #ccc;
        position: absolute;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        cursor: pointer;
    }

    .cc-virtual-pannel__block-title {
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cc-virtual-pannel__block-price {
        position: absolute;
        bottom: 0;
        color: #fff;
        opacity: 0.7;
        text-align: left;
    }

    .cc-virtual-pannel__block-price span {
        display: inline-block;
        background: #ba0506;
        padding: 0 2.5px;
    }

    .cc-virtual-pannel__block-price .sec-kill-price {
        font-weight: bold;
    }

    .cc-virtual-pannel__block-price .sec-kill-price + span {
        text-decoration: line-through;
    }

    .cc-virtual-pannel--show-title .cc-virtual-pannel__block-price {
        bottom: 18px;
    }

    .cc-virtual-pannel__block-post {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .cc-virtual-pannel__block--duplicated {
        border: 5px solid red;
    }

    .cc-virtual-pannel__block-base-info {
        float: left;
        overflow: hidden;
        max-width: 100%;
        text-align: left;
        padding: 2px;
        color: #fff;
        font-size: 8px;
        line-height: 1;
    }

    .cc-virtual-pannel__block-base-info span {
        display: inline-block;
        background: #000;
        opacity: 0.8;
    }
</style>
<style>
    .cc-virtual-pannel__title {
        position: absolute;
        background: #000;
        bottom: 0px;
        overflow: hidden;
        border: 0;
        width: 100%;
        opacity: 0.8;
        color: #fff;
        text-align: left;
        line-height: 1.3;
        box-sizing: border-box;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 8px;
    }
</style>
<script type="text/x-template" id="cc-virtual-panel">
    <div :class="{
            'cc-virtual-pannel': true
        }">
        <el-form ref="form" v-model="blockItems" label-width="85px">
            <el-form-item label="类型" prop="type">
                <el-input v-model.trim="blockItems.type" disabled></el-input>
            </el-form-item>
            <el-form-item label="模块名称" prop="moduleName">
                <el-input v-model.trim="blockItems.moduleName"></el-input>
            </el-form-item>
            <el-form-item label="基础包名" prop="packageRootName">
                <el-input v-model.trim="blockItems.packageRootName"></el-input>
            </el-form-item>
            <el-form-item label="子包名" prop="subPackageName">
                <el-input v-model.trim="blockItems.subPackageName"></el-input>
            </el-form-item>
            <el-form-item label="是否禁用" prop="disable">
                <el-radio-group
                        v-model="blockItems.disable"
                >
                    <el-radio v-for="(item, key) in TRUE_FALSE_DICT" :key="key" :label="item.value">{{
                        item.label
                        }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="路径" prop="path">
                <el-input v-model.trim="path" disabled></el-input>
            </el-form-item>
        </el-form>

    </div>
</script>

<script>
    Vue.component('cc-virtual-panel', {
        template: '#cc-virtual-panel',
        data() {
            return {
                blockItems: {},
                src: 'src/main/java',
                TRUE_FALSE_DICT: [
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 0
                    }
                ],
            }
        },

        props: ['blocks'],
        watch: {
//      'blocks': 'computeBlockItems',
        },
        computed: {
            path() {
                return this.buildPath()
            }
        },
        methods: {
            computeBlockItems() {
                const blocks = this.blocks || {}
                this.blockItems = Object.assign(blocks, {path: this.buildPath()})
            },
            buildPath() {
                const blocks = this.blocks || {}
                let pathList = [];
                pathList.push(blocks.moduleName)
                pathList.push(this.src)
                let rootPack = this.replace(blocks.packageRootName, '\\.', '/');
                pathList.push(rootPack)

                if (blocks.type == 'entity'){
                    pathList.push(blocks.type)
                    pathList.push(blocks.subPackageName)
                }else {
                    pathList.push(blocks.subPackageName)
                    pathList.push(blocks.type)
                }

                let path = pathList.join("/");
                return path;
            },
            replace(str, oldChar, newChar) {
                //g,表示全部替换。
                var reg = new RegExp(oldChar, "g");
                return str.replace(reg, newChar);
            }
        },
        created() {
            this.computeBlockItems()
        }
    })
</script>